<template>
<div class="container">
    <div class="page-head">
        <div class="left">
            <el-button type="danger" @click="showUploadView"><i class="el-icon-upload" style="margin-right: 5px"></i>上传客资</el-button>
            <el-button type="primary" @click="getUploadTpl"><i class="el-icon-download"></i>下载模板</el-button>
        </div>

        <div class="right">
            <el-form :inline="true" :model="query" @submit.native.prevent>
                <el-form-item>
                    <source-picker-view ref="sourcePickerRef" type="source" :checkStrictly="true" v-model="query.source_id" placeholder="请选择渠道"></source-picker-view>
                </el-form-item>

                <el-form-item>
                    <el-date-picker v-model="query.create_date_range" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-button type="primary" native-type="submit" @click="doSearch">搜索</el-button>
            </el-form>
        </div>
    </div>

    <el-table ref="tableView" height="tableHeight" class="page-body" v-loading="loading" :data="tableData" border>
        <el-table-column prop="id" width="55"></el-table-column>
        <el-table-column prop="source.title" label="渠道" width="180"></el-table-column>
        <el-table-column prop="file_name" label="文件名称"></el-table-column>
        <el-table-column prop="file_path" label="文件路径" width="120"></el-table-column>
        <el-table-column prop="total" label="客资总数" width="120"></el-table-column>
        <el-table-column prop="valid" label="非重复数" width="120"></el-table-column>
        <el-table-column prop="duplicate" label="重复数" width="120"></el-table-column>
        <el-table-column prop="user.realname" label="上传人" width="120"></el-table-column>
        <el-table-column prop="create_time" label="上传时间" width="120"></el-table-column>
    </el-table>

    <div class="page-foot">
        <div class="right">
            <common-pagination :total="pg.total" :page.sync="pg.page" :limit.sync="pg.limit" @getList="getTableData"></common-pagination>
        </div>
    </div>

    <upload-form ref="uploadFormRef"></upload-form>
</div>
</template>

<script>
import sourcePickerView from "@/components/picker/source.vue";
import pagination from "@/components/mixins/pagination.vue";
import uploadForm from './upload-form.vue';

export default {
    components: {
        sourcePickerView,
        uploadForm
    },
    mixins: [pagination],
    data() {
        return {
            query: {
                source_id: "",
                create_date_range: []
            },
            tableData: [],
            loading: false,
            pg: {
                page: 1,
                limit: 10,
                total: 0
            }
        };
    },
    methods: {
        doSearch() {
            this.getTableData();
        },
        getTableData() {
            this.loading = true;
            this.$api.customer.member.getList(this.query, this.pg).then(res => {
                this.tableData = res.data;
                this.pg.total = res.total;
                this.loading = false;
            });
        },
        showUploadView() {
            this.$refs.uploadFormRef.showDialog();
        },
        getUploadTpl() {

        }
    },
}
</script>
